<template>
  <div class="container bg-black">
    <div class="text-24">大厅</div>
    <el-tabs v-model="status" class="order-tab text-18px">
      <el-tab-pane label="全部" name="" />
      <el-tab-pane :label="`修图大厅(${tab1Count([1, 5])})`" name="1,5" />
      <el-tab-pane :label="`选片大厅(${tab1Count([45])})`" name="45" />
      <el-tab-pane :label="`待选片(${tab1Count([46])})`" name="46" />
      <el-tab-pane :label="`待修图(${tab1Count([8])})`" name="8" />
      <el-tab-pane :label="`待返修(${tab1Count([20])})`" name="20" />
      <el-tab-pane :label="`待验收(${tab1Count([30])})`" name="30" />
      <el-tab-pane :label="`完成(${tab1Count([100])})`" name="100" />
      <el-tab-pane :label="`申诉(${tab1Count([95])})`" name="95" />
      <el-tab-pane :label="`待支付(${tab1Count([55])})`" name="55" />
    </el-tabs>
    <div>
      <el-button
        class="bg-#191919 border-none text-#BCBCBC text-20px"
        @click="$router.push('/order/add')"
      >
        + 添加
      </el-button>
    </div>
    <el-table class="order-table" :data="orderList" size="small">
      <el-table-column prop="task_order_num" label="编号" width="200px" />
      <el-table-column prop="cust_name" label="姓名" />
      <el-table-column prop="business_model_text" label="模式" />
      <el-table-column prop="type_text" label="拍摄" />
      <el-table-column prop="category_text" label="精修">
        <template slot-scope="scope">
          {{ scope.row.task_order_select?.meal_pic_num }}
        </template>
      </el-table-column>
      <el-table-column prop="" label="选片佣金">
        <template slot-scope="scope">
          <span>{{ scope.row.task_order_select?.commission_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="发布日期" width="220px" />
      <el-table-column prop="" label="操作" align="center" width="120px">
        <template slot-scope="scope">
          <div class="text-center">
            <el-button
              type="text"
              @click="$router.push(`/order/add?id=${scope.row.id}`)"
            >
              <span>详情</span>
            </el-button>
            <el-button type="text" @click="handleShowQr(scope.row)">
              <span>二维码</span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:20px;text-align: right;">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :pager-count="5"
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePageChange"
      />
    </div>
    <el-dialog
      :visible="showQrModal"
      width="320px"
      class="qr-modal"
      @close="showQrModal = false"
    >
      <div class="text-center">
        <img :src="qrUrl" alt="QR Code">
      </div>
      <div class="text-center mt-20px">
        <el-button class="qr-btn" @click="copyQr">复制</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status: '',
      total: 0,
      orderList: [],
      counts: [],
      showQrModal: false,
      qrUrl: '',
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      attrs: {
        BUSINESS_MODEL: [],
        CATEGORY: [],
        DURATION: [],
        QUALITY: [],
        REPAIR_TIMES: [],
        TYPE: []
      }
    }
  },
  computed: {
    tab1Count () {
      return (status) => {
        const counts = this.counts.filter(i => status.includes(i.status))
        const result = counts.reduce(
          (init, current) => (init += current.num),
          0
        )
        return result
      }
    }
  },
  watch: {
    status: {
      handler () {
        this.getData()
      }
    },
    '$store.state.searchQuery': {
      handler (newQuery) {
        this.searchQuery = newQuery
        this.currentPage = 1
        this.getData()
      }
    }
  },
  mounted () {
    this.$axios
      .post('/TaskOrder/getOrderCountByStatus', {
        status: []
      })
      .then(({ data }) => {
        this.counts = data
      })
    this.$axios.get('/TaskOrder/getAttr').then((res) => {
      console.log(res, 'ressss')
    })
  },
  methods: {
    getData () {
      const loading = this.$loading({ background: 'rgba(0,0,0,0)' })
      const params = {
        keyword: this.searchQuery,
        status: this.status ? this.status.split(',').map(i => i * 1).filter(j => j !== 0) : [],
        page: this.currentPage,
        pageSize: this.pageSize
      }
      this.$axios
        .post('/TaskOrder/getOrderListByStatus', params)
        .then(({ data }) => {
          this.orderList = data.data
          this.total = data.total
        })
        .catch(() => {
          loading.close()
        }).finally(() => {
          loading.close()
          this.searchQuery = ''
        })
    },
    handleShowQr (row) {
      this.$axios
        .post('/User/orderCode', {
          task_order_id: row.id,
          default_page: 'pages/login',
          env_version: 'trial'
        })
        .then(({ data }) => {
          this.qrUrl = data.url
          this.showQrModal = true
        })
    },
    handleGetImgs (row) {
      this.$axios.post('/TaskOrder/getSelectRoomImages', {
        task_order_id: row.id
      })
    },
    handlePageChange (page) {
      this.currentPage = page
      this.getData()
    },
    async copyQr () {
      if (!navigator.clipboard || !navigator.clipboard.write) {
        this.$message.error('当前浏览器不支持复制图片到剪切板')
        return
      }

      try {
        const response = await fetch(this.qrUrl)
        const blob = await response.blob()
        const clipboardItem = new ClipboardItem({ [blob.type]: blob })
        await navigator.clipboard.write([clipboardItem])
        this.$message.success('图片已复制到剪切板')
        this.showQrModal = false
      } catch (err) {
        this.$message.error('复制失败，请重试')
        console.error('复制失败:', err)
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20px 40px;
  box-sizing: border-box;
  color: #595a60;
  .order-tab {
    .el-tabs__nav-scroll {
      padding-bottom: 20px;
      .el-tabs__active-bar {
        background-color: #7dc3ea;
      }
      .el-tabs__item {
        font-size: 18px;
      }
      .el-tabs__item.is-active {
        color: #7dc3ea;
      }
    }
    th.el-table__cell.is-leaf {
      border-bottom-color: red;
    }
    .el-tabs__nav-wrap::after {
      background-color: #7b7d82;
    }
  }
  .order-table {
    margin-top: 20px;
    font-size: 20px;
    background-color: #000;
    border-color: #58595d;
    &.el-table {
      tr {
        background-color: #000;
      }
      &::before {
        background-color: #58595d;
      }
    }
    &.el-table th.el-table__cell {
      background-color: #191919;
      border-bottom-color: #58595d;
    }
    &.el-table td.el-table__cell {
      border-bottom-color: #58595d;
      font-size: 18px;
    }
  }
}
.qr-modal {
  background: transparent;
  .el-dialog {
    background: transparent;
  }
  .qr-btn {
    background: #eee;
    color: #000;
    border-color: transparent;
  }
}

/* 设置分页导航的背景色 */
:deep(.el-pagination) {
  background-color: transparent !important; /* 设置为透明 */
  color: #595A5F !important; /* 设置文字颜色 */
}

:deep(.el-pagination button) {
  background-color: transparent !important;
  color: #595A5F !important;
}

:deep(.el-pager li) {
  background-color: transparent !important;
  color: #595A5F !important;
}

/* 选中页码的样式 */
:deep(.el-pager li.active) {
  color: #409EFF !important; /* 或者其他你想要的高亮颜色 */
}

/* 鼠标悬停时的样式 */
:deep(.el-pager li:hover) {
  color: #409EFF !important;
}

/* 禁用按钮的样式 */
:deep(.el-pagination button:disabled) {
  background-color: transparent !important;
  color: #C0C4CC !important;
}
</style>
